<template>
    <div class="app-container">
        <el-form :model="banner" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
            <el-form-item label="Banner链接URL" prop="bannerUrl" >
                <el-input v-model="banner.bannerUrl"></el-input>
            </el-form-item>
            <el-form-item label="显示排序" prop="orderNum" >
                <el-input-number v-model="banner.orderNum" :min="1" :max="999" label="排序号"></el-input-number>
            </el-form-item>
            <el-form-item class="myuploader" label="Banner图片" prop="bannerImg" >
                <el-upload
                ref="uploader"
                class="upload-demo"
                :on-change="handleChange"
                :action="uploadUrl"
                :file-list="fileList"
                :data="banner"
                :on-success="onSuccess"
                :on-error="onError"
                :multiple="false"
                :auto-upload="false"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    
</template>

<script>
  export default {
    data() {
      return {
        fileList:[],
        uploadUrl:process.env.VUE_APP_BASE_API+'/banner',
        banner: {
          bannerImg: '',
          orderNum: 0,
          bannerUrl:''
        },
        rules: {
          bannerUrl: [
            { required: true, message: '请输入Banner链接URL', trigger: 'blur' }
          ],
          orderNum: [
            { required: true, message: '请输入排序号', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      onSuccess() {
        this.$message('提交成功')
        this.$router.push('/content/banner')
      },
      onError() {
        this.$message('上传出错！')
      },
      handleChange(file, fileList) {
        const isPNG = file.raw.type === "image/png"
        const isLt2M = file.raw.size / 1024 / 1024 < 0.5
        if (fileList.length > 0) {
        //单个覆盖上传
            this.fileList = [fileList[fileList.length - 1]] // 这一步，是 展示最后一次选择的csv文件
            if (!isPNG) {
                this.$message.error("上传图片只能是 PNG 格式!")
                this.fileList = []
                return false
            } else if (!isLt2M) {
                this.$message.error("上传图片大小不能超过 200kb!")
                this.fileList = []
                return false
            }
            return true
        }
      },
      submitForm(formName) {
        if(this.fileList.length ==0){
          this.$message('请选择一张图片上传！')
          return ;
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$refs.uploader.submit()
          } 
        })
      },
      resetForm(formName) {
        this.fileList=[]
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>
    .myuploader >>> .el-list-enter-active,.myuploader >>> .el-list-leave-active{
        transition: none;
    }

    .myuploader >>>.el-list-enter,.myuploader >>> .el-list-leave-active {
      opacity: 0;
    }
</style>